<template>
    <div class="member">
        <header>会员管理</header>
        <div class="contents">
            <div class="conditions">
                <div class="condition_1">
                    <div class="market_type">
                        <span>会员账号：</span>
                        <el-input v-model.trim="input1" placeholder="请输入手机号" style="width:300px;"></el-input>
                    </div>
                    <div class="status">
                        <span>会员等级：</span>
                        <el-select clearable v-model="value1" placeholder="请选择" style="width:300px;">
                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </div>
                    <el-button type="danger" style="background:#e7251a;" @click.native="querys">查询</el-button>
                    <el-button @click="resets">重置</el-button>
                </div>
                <div class="condition_2">
                    <div class="keywords">
                        <span>注册日期：</span>
                        <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions1" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> </el-date-picker>
                    </div>
                </div>
                <div class="condition_3">
                    <el-button type="danger" style="background:#e7251a;" @click.native="exports">批量导出</el-button>
                    <el-button @click="stopUse(0)">批量停用</el-button>
                </div>
                <div class="selected" v-if="selectArr.length>0">
                    <p>
                        <img src="../../assets/images/market/select2.png" alt="" />
                        <span>已选择&nbsp;
                            <label>{{selectArr.length}}</label>&nbsp;项</span>
                    </p>
                </div>
                <div class="tables">
                    <el-table v-loading="loading" :data="listData" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="50"> </el-table-column>
                        <el-table-column prop="PHONE" label="会员手机号" width="200"> </el-table-column>
                        <el-table-column prop="DREGDT" label="注册时间" width="180">
                            <template slot-scope="scope">
                                <span v-if="scope.row.DREGDT">{{ scope.row.DREGDT | filterTimess }}</span>
                                <span v-else>--</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="USERGRADE" label="等级" width="150">
                            <template slot-scope="scope">
                                <span v-if="scope.row.USERGRADE==1">普通</span>
                                <span v-if="scope.row.USERGRADE==2">银卡</span>
                                <span v-if="scope.row.USERGRADE==3">金卡</span>
                                <span v-if="scope.row.USERGRADE==4">钻石</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="BIRTHDAY" label="会员生日" width="180">
                            <template slot-scope="scope">
                                <span v-if="scope.row.BIRTHDAY">{{ scope.row.BIRTHDAY | filterTimes }}</span>
                                <span v-else>--</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="CURRENTPOINT" label="积分" width="150"> </el-table-column>
                        <el-table-column prop="NUM" label="优惠券" width="150"> </el-table-column>
                        <el-table-column prop="AMOUNT" label="余额" width="150">
                            <template slot-scope="scope">
                                <span class="remains">￥{{ scope.row.AMOUNT }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="options" label="操作" width="180">
                            <template slot-scope="scope">
                                <span class="editStatus" @click="stopUse(scope.row.USERID)">停用</span>
                                <span class="edits" @click="goDetail(scope.row.USERID)">详情</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page1" :page-sizes="[6, 8, 10]" :page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="tableDatas.TOTAL"> </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import dateSelect from '@/assets/js/date_time_picker.js' //日期选择器数据封装
    export default {
        name: 'member',
        data() {
            return {
                value1: '', //会员等级
                value2: '', //注册日期
                pickerOptions1: dateSelect,
                input1: '', //手机号
                options1: [{
                    value: 1,
                    label: '普通'
                }, {
                    value: 2,
                    label: '银卡'
                }, {
                    value: 3,
                    label: '金卡'
                }, {
                    value: 4,
                    label: '钻石'
                }],
                tableDatas: [],                
                selectArr: [], //已选择的数组集合
                loading: true,
                page1: 1, //当前页数
                pageSize1: 6, //每页多少条
            }
        },
        computed: {
            //请求参数
            objs() {
                let obj = {};
                obj.PAGE_NO = this.page1;
                obj.PAGE_SIZE = this.pageSize1;
                this.input1 ? obj.PHONE = Number(this.input1) : null;
                this.value1 ? obj.GRADE = this.value1 : null;
                if(this.value2 === null) {
                    this.value2 = '';
                }
                if(this.value2.length > 0) {
                    obj.STARTTIME = this.value2[0].getTime();
                    obj.ENDTIME = this.value2[1].getTime();
                }
                return obj;
            },
            //分页数据
            listData() {
                if(this.tableDatas.CAFEMEMARR) {
                    return this.tableDatas.CAFEMEMARR;
                }
            },
        },
        created() {
            this.getList();
        },
        methods: {
            //会员列表
            getList() {
                this.loading = true;
                this.$axiosPost('/4SCAFE/CarUser/cafeMemberList.action', this.objs).then(res => {
                    //console.log(res);
                    if(res.STATUS_CODE === 1) {
                        this.loading = false;
                        this.tableDatas = res;
                    }
                })
            },
            //选中checkbox
            handleSelectionChange(val) {
                this.selectArr = val;
                //console.log(this.selectArr);
            },
            handleSizeChange(val) {
                this.loading = true;
                this.pageSize1 = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.loading = true;
                this.page1 = val;
                this.getList();
            },
            //停用、批量停用
            stopUse(id) {
                let ID = '';
                if(id) {
                    ID = id
                } else {
                    if(this.selectArr.length === 0) {
                        this.$alert('请选择会员', '提示', {
                            confirmButtonText: '确定',
                        });
                        return;
                    }
                    let strr = '';
                    this.selectArr.forEach(function(i) {
                        strr += i.USERID + ',';
                    })
                    strr = strr.substring(0, strr.length - 1);
                    //console.log(strr);
                    ID = strr;
                }
                this.$axiosPost('/4SCAFE/CarUser/cafeMemberUptoDown.action', {
                    USER_IDS: ID
                }).then(res => {
                    if(res.STATUS_CODE === 1) {
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        });
                        this.getList();
                    }
                })
            },
            //会员详情
            goDetail(id) {
                this.$router.push({
                    path: '/manages/memberDetail/' + id
                });
            },
            //查询
            querys() {
                this.getList();
            },
            //重置
            resets() {
                this.input1 = this.value1 = this.value2 = '';
            },
            //批量导出
            exports() {
            	let obj = {},str = '',ur = '';
            	this.input1 ? obj.PHONE = this.input1 : obj.PHONE = null;
            	this.value1 ? obj.GRADE = this.value1 : obj.GRADE = null;
            	if(this.value2 === null) {
                    this.value2 = '';
                }
                if(this.value2.length > 0) {
                    obj.STARTTIME = this.value2[0].getTime();
                    obj.ENDTIME = this.value2[1].getTime();
                }else{
                	obj.STARTTIME = null;
                	obj.ENDTIME = null;
                }                
                if(this.input1){
                	ur += 'PHONE='+obj.PHONE;
                }                
                if(this.value1){
                	if(this.input1){
                		ur += '&GRADE='+obj.GRADE;	
                	}else{
                		ur += 'GRADE='+obj.GRADE;
                	}
                }
                if(this.value2.length>0){
                	if(this.input1 || this.value1){
                		ur += '&STARTTIME='+obj.STARTTIME+'&ENDTIME='+obj.ENDTIME;	
                	}else{
                		ur += 'STARTTIME='+obj.STARTTIME+'&ENDTIME='+obj.ENDTIME;
                	}
                }
                let urll = window.getIps+'/4SCAFE/CarUser/exportCafeMember.action?'+ur;                
                window.open(urll);
            },
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .member {
        header {
            background: #fff;
            font-size: 22px;
            font-weight: 700;
            padding: 20px;
        }
        .contents {
            width: 97%;
            margin: 25px auto;
            padding: 25px;
            background: #fff;
            .conditions {
                span {
                    white-space: nowrap;
                }
                .condition_1 {
                    display: flex;
                    .status {
                        margin: 0 35px;
                    }
                }
                .condition_2 {
                    display: flex;
                    margin: 20px 0;
                    .keywords {
                        display: flex;
                        align-items: center;
                        .el-input {
                            width: 210px;
                        }
                    }
                }
                .selected {
                    margin-top: 15px;
                    border: 1px solid #f0f0f0;
                    border-radius: 5px;
                    background: #fafafa;
                    p {
                        display: flex;
                        align-items: center;
                        img {
                            width: 20px;
                            height: 20px;
                            margin: 0 10px;
                        }
                        span {
                            font-size: 16px;
                            color: #717a7d;
                            label {
                                color: #e7251a;
                            }
                        }
                    }
                }
                .tables {
                    margin-top: 15px;
                    .el-pagination {
                        text-align: center;
                        margin-top: 30px;
                    }
                    .editStatus, .edits {
                        color: #1d93ff;
                        cursor: pointer;
                        margin: 0 2px;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
                .footers {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 55px;
                    .footers_left {
                        display: flex;
                    }
                    .footers_right {
                        display: flex;
                    }
                }
            }
        }
        .dialog_box {
            border-top: 1px solid #f0f0f0;
            .dialog_datas {
                border-top: 1px solid #f0f0f0;
                border-bottom: 1px solid #f0f0f0;
                padding: 10px 0 30px 0;
                box-sizing: border-box;
                max-height: 400px;
                overflow-y: auto;
                .dialog_data {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            .dialog_btn {
                display: flex;
                justify-content: flex-end;
                padding: 15px 30px 0 0;
            }
        }
    }
</style>